<template>
	<view class="orders" :class="orderList.length==0?'empty':''">
		<block v-if="orderList.length>0">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item,index) in orderList" :key="index" :class="item.status==3?'qx':''"
					@tap.prevent="toDetails(item)">
					<view class="top">
						<view class="left">
							<image src="https://i.ringzle.com/file/20240301/585f319946d54f3f8c59a8d92c07fe22.png">
							</image>
							<text>渔家乐</text>
							<text v-if="item.orderType==3">（{{item.teamLeader==1?'我发起的':'我参与的'}})</text>
						</view>
						<view class="right">
							<block v-if="item.status==0&&item.djsTime">
								<uCountDown @finish="finish(item)" :djsTime="item.djsTime" />
							</block>
							<block v-else>
								<text v-if="item.orderType==3&&item.status==1">拼团成功</text>
								<text :class="oscConfig[item.status]||'textDcx'">{{FishJialeOcfg[item.status]}}</text>
							</block>
						</view>
					</view>
					<view class="content">
						<view class="title">
							<text>{{item.goodsNameAndType}}</text>
							<text>￥{{item.orderRealityPay}}</text>
						</view>
						<view class="room_price">
							<text>游玩日期：{{item.playDate}}</text>
						</view>
					</view>
					<template v-if="item.status==0||item.status==1||item.status==2">
						<!-- 待支付 -->
						<view class="btns" v-if="item.status==0">
							<view @tap.stop="cancelOrder(item)">取消</view>
							<view @tap.stop="toPay(item)" class="btn_blue"
								style="color: #FFFFFF; background-color: #FF4141;">去支付</view>
						</view>
						<!-- 待使用 -->
						<view class="btns" v-if="item.status==1">
							<view @tap.stop="refundTicket(item)" class="btn_blue" v-if="item.orderType!=3&&item.orderType!=1">退票</view>
							<view @tap.stop="orderAgain()">再次预订</view>
						</view>
						<!-- 待拼船 -->
						<view class="btns" v-if="item.status==2">
							<!-- <view @tap.stop="mianpin(item.id)">免拼</view> -->
							<view @tap.stop="cancelOrder(item)">取消拼船</view>
							<view @tap.stop="orderAgain()">再次预订</view>
						</view>
					</template>
					<view class="btns" v-else>
						<!-- <view @tap.stop="applyAfterSales(item)" class="btn_blue">申请售后</view> -->
						<view @tap.stop="del(item)" class="btn_blue">删除订单</view>
						<view @tap.stop="orderAgain()">再次预订</view>
					</view>
				</u-list-item>
			</u-list>
		</block>
		<block v-else>
			<NoData style="margin: 0 100%;" />
		</block>
		<!-- 删除弹框 -->
		<u-modal :show="showdelete" :title="title" :content='contented' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirmed" @cancel='cancel'></u-modal>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
				mysearch: '',
				orderList: [],
				oscConfig: {
					0: 's0',
					1: 's1',
				},
				pageIndex: 1,
				pageCount: 10,
				// isOver: false,
				FishJialeOcfg: {
					0: '待支付',
					1: '待使用',
					2: '拼船中',
					3: '已使用',
					4: '退款中',
					5: '已退款',
					6: '已取消',
					7: '已完成',
					8: '拼团失败'
				},
				state: '',
				disScroll: false,
				showdelete: false,
				title: '温馨提示',
				contented: '您确定要删除吗？确定删除将不可撤回！',
				delId: null
			}
		},
		methods: {
			scrolltolower() {
				if (!this.disScroll) {
					this.getList();
				}

			},
			// 评价
			appraise(item) {
				let obj = {
					guideId: item.userId,
					orderCode: item.orderCode,
					sourceType: 10,
				}
				uni.navigateTo({
					url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(obj),
				});
			},
			init() {
				this.pageIndex = 1;
				this.orderList = [];
				this.getList();
			},
			// 搜索
			search(keyword) {
				this.mysearch = keyword;
				this.pageIndex = 1;
				// this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			// 再次预订
			orderAgain() {
				uni.redirectTo({
					url: '/pagesTrip/fishJiale2/index'
				})
			},

			getList() {
				let that = this;
				this.$api.get('/api/fishering/personCenterPage', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					status: this.state,
					page: this.pageIndex,
					limit: this.pageCount,
					search: this.mysearch,
					delFlag: 0,
				}).then(res => {
					if (res.data.code === 0) {
						let {
							list,
							total
						} = res.data.data;
						that.orderList = [...that.orderList, ...list];
						that.orderList.forEach(o => {
							if (o.status == 0) {
								let diffMS = Date.parse(new Date()) - Date.parse(new Date(o.createDate));
								let gqTime = this.$gqTime;
								if (o.orderType == 3) gqTime = 5 * 60 * 1000;
								if (diffMS < gqTime) o.djsTime = gqTime - diffMS - 1000; //提前一秒，便于取消刷新
							}
						})
						if (res.data.data.list.length < 10) {
							this.disScroll = true;
						} else {
							that.pageIndex++;
						}
					} else that.$showToast(res.data.msg);
				})
			},
			changeStatus(index) {
				if (index === 0) this.state = '';
				else if (index === 1) this.state = '0'
				else if (index === 2) this.state = '1';
				else if (index === 3) this.state = '3,7';
				else if (index === 4) this.state = '4,5';
				this.init();
			},
			//申请售后
			applyAfterSales(item) {
				this.$showToast('正在开发中...');
			},
			//退款
			refundTicket(item) {
				uni.navigateTo({
					url: '/pagesMy/FishJialeList/applyRefund?id=' + item.orderCode
				})
			},
			mianpin(id) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定该操作？',
					success: function(res) {
						if (res.confirm) {
							that.$api.get('/scenic/order/noSpell/' + id).then(res => {
								if (res.data.code === 0) {
									that.$showToast('操作成功');
									that.pageIndex = 1;
									that.orderList = [];
									that.getList();
								} else that.$showToast(res.data.msg, 6000)
							})
						}
					}
				});
			},
			//取消订单
			cancelOrder(item) {
				let sendData = {
					orderType: item.orderType,
					orderCode: item.orderCode,
					playLength: item.playLength,
					playTime: item.playTime,
					playDate: item.playDate,
					status: item.status,
					merchantId: item.merchantId,
					boatNo: item.boatNo
				}
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消订单？',
					success: function(res) {
						if (res.confirm) {
							that.$api.post('/scenic/api/order/cancelOrder', sendData).then(res => {
								if (res.data.code === 0) {
									that.$showToast('订单已取消');
									that.pageIndex = 1;
									that.orderList = [];
									that.getList();
								} else that.$showToast(res.data.msg)
							})
						}
					}
				});
			},
			// 删除订单
			del(item) {
				this.delId = item.id
				this.showdelete = true
			},

			// 确定删除
			confirmed() {
				let id = this.delId
				this.$api.get(`/scenic/api/order/deleteOrder/${id}`).then(res => {
					if (res.data.code === 0) {
						this.showdelete = false
						this.init();
					} else this.$showModal(res.data.msg)
				})
			},
			cancel() {
				this.showdelete = false
			},


			//去支付
			toPay(item) {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: item.orderCode,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.$wxPay(res.data).then(result => {
							this.$showToast('支付成功');
							this.init();
						})
					}
				})
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/pagesMy/FishJialeList/FishJialeDetails?id=' + item.orderCode
				})
			},
			finish(item) {
				let sendData = {
					orderType: item.orderType,
					orderCode: item.orderCode,
					playLength: item.playLength,
					playTime: item.playTime,
					playDate: item.playDate,
					status: item.status,
					merchantId: item.merchantId,
					boatNo: item.boatNo
				}
				let that = this;
				that.$api.post('/scenic/api/order/cancelOrder', sendData).then(res => {
					if (res.data.code === 0) {
						that.pageIndex = 1;
						that.disScroll = false;
						that.orderList = [];
						setTimeout(() => {
							that.getList();
						}, 500)
					} else that.$showToast(res.data.msg)
				})
			}
		}
	}
</script>



<style scoped lang="less">
	.orders {
		display: flex;
		align-items: center;

		&.empty {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		::v-deep .u-list-item {
			width: 100%;
			margin-top: 20rpx;
			border-radius: 16rpx;
			background: #fff;
			padding: 36rpx 24rpx 24rpx;
			box-sizing: border-box;

			&:last-child {
				margin-bottom: 40rpx;
			}

			.top {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						line-height: 28rpx;
						margin-left: 20rpx;
					}
				}

				.right {
					text-align: right;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 37rpx;

					text {
						color: #999;
					}
				}
			}

			.content {
				padding: 22rpx 0 24rpx 56rpx;
				background: #fff;

				.title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						font-size: 32rpx;
						font-family: PingFang-SC-Bold, PingFang-SC;
						font-weight: bold;
						color: #333333;
						line-height: 45rpx;

						&:last-child {
							color: #111111;
						}
					}
				}

				.date {
					display: flex;
					align-items: center;
					margin-top: 22rpx;

					&>text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #AAAAAA;
						line-height: 24rpx;
					}
				}

				.room_price {
					margin-top: 16rpx;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #AAAAAA;
				}
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				border-top: 1rpx solid #EFEFEF;

				&>view {
					margin: 20rpx 0 0 20rpx;
					padding: 9rpx 20rpx;
					background-color: #F6F6F6;
					border-radius: 16rpx;
					text-align: center;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333;
				}
			}

			&.qx {
				text {
					color: #AAAAAA !important;
				}
			}
		}
	}

	.textQx {
		color: #999;
	}

	.s1 {
		color: #333333 !important;
	}

	.s0 {
		color: #feb000 !important;
	}
</style>